<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <script src='//cdn.bootcss.com/jquery/1.11.3/jquery.js'></script>
    <script src='/javascripts/notify.js'></script>
  </head>
  <body>
    <div class="notification sticky hide">
        <p id="content"> </p>
        <a class="close" href="javascript:"> <img src="/images/icon-close.png" /></a>
    </div>
    <div class="wrapper">
        <div style="width:850px;">
            <h3>介绍:</h3>
            <b>这是一个消息推送系统，基于<a rel="nofollow" href="https://socket.io/">Socket.IO</a>开发。<br><br><br></b>
            <h3>支持以下特性：</h3>
            <ul>
                <li>多浏览器支持</li>
                <li>多类型客户端支持</li>
                <li>支持针对单个用户推送消息</li>
                <li>支持向所有用户推送消息</li>
                <li>支持服务端主动推送消息</li>
                <li>支持客户端之前推送消息</li>
                <li>长连接推送（websocket或者comet），消息即时到达</li>
                <li>支持在线用户数实时统计推送（见页脚统计）</li>
            </ul>
            <h3>测试:</h3>
            当前用户uid：<b class="uid"></b><br>
            可以通过url：<a id="send_to_one" href="http://localhost:3000/sendMsg/?type=public&uid=1445590039000&content=消息内容" target="_blank"><font style="color:#91BD09">http://<font class="domain"></font>:3000/sendMsg/?type=private&uid=<b class="uid"></b>&content=消息内容</font></a>  向当前用户发送消息<br>
            可以通过url：<a href="http://localhost:3000/sendMsg/?type=publish&to=&content=消息内容" target="_blank"  id="send_to_all" ><font style="color:#91BD09">http://<font class="domain"></font>:3000/sendMsg/?type=public&content=消息内容</font></a> 向所有在线用户推送消息<br>
            <script>
                // 使用时替换成真实的uid，这里方便演示使用时间戳
                var uid = Date.parse(new Date());
                $('#send_to_one').attr('href', 'http://'+document.domain+':3000/sendMsg/?type=private&content=%E6%B6%88%E6%81%AF%E5%86%85%E5%AE%B9&uid='+uid);
                $('.uid').html(uid);
                $('#send_to_all').attr('href', 'http://'+document.domain+':3000/sendMsg/?type=public&content=%E6%B6%88%E6%81%AF%E5%86%85%E5%AE%B9');
                $('.uid').html(uid);
                $('.domain').html(document.domain);
            </script>
        </div>
    </div>
    <div id="footer">
        <center id="online_box"></center>
        <center><p style="font-size:11px;color:#555;"> Powered by <a href="https://github.com/gytai/node-msg-sender.git" target="_blank"><strong>TaiGuangYin!</strong></a></p></center>
    </div>
  </body>
  <script src="/socket.io/socket.io.js"></script>

  <script>
      var socket = io.connect('http://'+document.domain+':3000');
      socket.on('connect', function () {
          console.log('连接成功...');
          socket.emit('login', new Date().getTime());
      });

      // 后端推送来消息时
      socket.on('message', function(msg){
          $('#content').text('收到消息：'+msg);
          $('.notification.sticky').notify();
      });

      // 后端推送来在线数据时
      socket.on('update_online_count', function(data){
          console.log(data);
          $('#online_box').html('当前在线客户端数:&nbsp;'+data.online_count);
      });

  </script>
</html>
